<template>
  <view class="container">
    <view class="user">
      <!-- #ifdef MP-WEIXIN -->
      <view class="left">
        <!-- 如果能获取存储的登录信息就数据库的昵称 -->
        <view class="nickname" v-if="JSON.stringify(business) !== '{}'">
          {{ business.nickname }}
        </view>

        <!-- 如果没有获取到就会显示微信昵称 -->
        <open-data v-else type="userNickName" class="nickname"></open-data>
      </view>
      <view class="right">
        <view class="avatar xcx">
          <u-avatar
            :src="business.avatar_text"
            size="90"
            v-if="JSON.stringify(business) !== '{}'"
          ></u-avatar>

          <!-- 如果没有获取到就会显示微信头像 -->
          <open-data type="userAvatarUrl" v-else></open-data>
        </view>
      </view>
      <!-- #endif -->

      <!-- H5 -->
      <!--  #ifdef H5 || APP-PLUS -->
      <view class="left">
        <view class="nickname" v-if="JSON.stringify(business) !== '{}'">
          {{ business.nickname }}
        </view>
        <view class="nickname" v-else> 请先登录 </view>
      </view>
      <view class="right">
        <view class="avatar">
          <u-avatar
            :src="business.avatar_text"
            size="90"
            v-if="JSON.stringify(business) != '{}'"
          ></u-avatar>
          <u-avatar src="/static/avatar.jpg" size="90" v-else></u-avatar>
        </view>
      </view>
      <!-- #endif -->
    </view>

    <view class="menu" v-if="JSON.stringify(business) !== '{}'">
      <view class="item" hover-class="checkActive" @click="ToProduct">
        <view class="title">产品防伪管理</view>
        <u-icon name="arrow-right"></u-icon>
      </view>

      <!--  #ifdef MP-WEIXIN -->
      <view class="item" hover-class="checkActive" @click="onUnbinding">
        <view class="title">解除绑定账号</view>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <!-- #endif -->

      <view class="item" hover-class="checkActive" @click="OnLogout">
        <view class="title">退出账号</view>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>

    <!-- 按钮 -->
    <view class="actions">
      <!-- #ifdef MP-WEIXIN -->
      <view class="login" v-if="JSON.stringify(business) === '{}'">
        <u-button type="primary" icon="weixin-circle-fill" @click="onLogin">
          微信一键登陆
        </u-button>
      </view>
      <!-- #endif -->

      <!--  #ifdef H5 || APP-PLUS -->
      <view class="login" v-if="JSON.stringify(business) === '{}'">
        <u-button type="primary" @click="toLogin">登录账号</u-button>
      </view>
      <!-- #endif -->
    </view>

    <!-- 提醒组件 uViewUI框架 -->
    <u-toast ref="notice" />

    <!-- 模态框 -->
    <u-modal
      :show="show"
      :content="content"
      showCancelButton
      @confirm="ModalConfirm"
      @cancel="show = false"
    ></u-modal>
  </view>
</template>
<script>
export default {
  onShow() {
    //获取本地存储
    var business = uni.getStorageSync("business")
      ? uni.getStorageSync("business")
      : {};

    // 判断对象是否为空
    if (Object.getOwnPropertyNames(business).length > 0)
      this.business = business;
  },
  data() {
    return {
      show: false,
      content: "是否确认退出",
      action: "",
      business: {
        // id: 1,
        // nickname:'demo'
      },
    };
  },
  methods: {
    // weixin登录
    onLogin() {
      // 调用第三方登录接口  uni.login==wx.login
      uni.login({
        provider: "weixin", //微信登录
        success: async (LoginRes) => {
          // 临时凭证code
          var code = LoginRes.code ? LoginRes.code : "";

          //判断是否有临时凭证
          if (!code) {
            // 调用uView框架的提醒框
            this.$refs.notice.show({
              type: "error",
              message: "临时凭证获取失败！",
            });
            return false;
          }

          //发送请求
          var result = await uni.$u.http.post("/business/login", { code });

          if (result.code == 0) {
            this.$refs.notice.show({
              type: "error",
              message: result.msg,
            });
          }

          //判断是否有action这个选项
          var action = result.data.action ? result.data.action : "";
          var openid = result.data.openid ? result.data.openid : "";

          //成功提醒
          this.$refs.notice.show({
            type: "success",
            message: result.msg,
            complete: () => {
              //授权成功，但是无绑定账号
              if (action == "bind") {
                // 路由跳转  $u属于uView
                uni.$u.route({
                  url: "pages/business/bind",
                  params: {
                    openid: openid,
                  },
                });
                return;
              } else {
                //直接找到了用户
                //存储本地存储
                uni.setStorageSync("business", result.data);

                //修改一下data数据
                this.business = result.data;
              }
            },
          });
        },
        fail: () => {},
      });
    },
    //web登录
    toLogin() {
      this.$u.route("pages/business/login");
    },
    ToProduct() {
      this.$u.route("pages/business/list");
    },

    // 模态框的方法
    ModalConfirm() {
      this.show = false;

      if (this.action == "logout") {
        this.LogoutConfirm();
      } else if (this.action == "unbind") {
        this.UnbindingConfirm();
      }
    },

    //退出
    OnLogout() {
      this.show = true;
      this.content = "是否确认退出账号";
      this.action = "logout";
    },

    // 退出确认
    LogoutConfirm() {
      //清空本地存储
      uni.clearStorageSync();

      this.business = {};
    },

    //解除绑定
    onUnbinding() {
      this.show = true;
      this.content = "是否确认解除绑定账号";
      this.action = "unbind";
    },

    // 解除绑定确认
    async UnbindingConfirm() {
      //发送请求
      var result = await uni.$u.http.post("/business/unbind", {
        busid: this.business.id,
      });

      if (result.code == 0) {
        // 失败
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });

        return false;
      } else {
        // 成功
        //直接做一个退出登录动作
        this.LogoutConfirm();

        this.$refs.notice.show({
          type: "success",
          message: result.msg,
        });
      }
    },
  },
};
</script>

<style>
page {
  background-color: #eee;
}

.container {
  width: 95%;
  margin: 0 auto;
}

.user {
  display: flex;
  padding: 40px;
  background-color: #fff;
  margin-top: 10px;
  border-radius: 10px;
}

/* #ifdef H5  */
.user {
  align-items: center;
}
/* #endif */

.user .left {
  flex: 3;
}

/* 条件编译 */
/* #ifdef MP-WEIXIN  */
.user .left {
  flex: 3;
  display: flex;
  align-items: center;
  align-content: center;
}
/* #endif */

.user .right {
  flex: 1;
}

.user .right .xcx {
  width: 200rpx;
  height: 200rpx;
  border-radius: 100%;
  overflow: hidden;
}

.user .left .nickname {
  font-size: 26px;
  font-weight: bold;
}

.actions {
  display: flex;
  padding: 20px 40rpx;
}

.login {
  flex: 1;
}

.menu {
  background-color: #fff;
  margin-top: 10px;
}

.menu .item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 10px 10px;
  font-size: 14px;
}

.checkActive {
  background-color: rgba(233, 233, 233, 0.5);
}
</style>
